<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>热映电影</title>
    <style>
        table,
        td,th{
            border: 1px solid black;
        }
    </style>
</head>

<body>
    时间：<input type="datetime-local" id="time" pattern="yyyy-MM-dd HH:mm:ss">
    城市：<input type="text" id="city">
    <hr>
    <table id="subtable">
        <thead>
            <tr>
                <th>电影编号</th>
                <th>电影名称</th>
                <th>看它</th>
            </tr>
        </thead>
        <tbody id="tablebody"></tbody>
    </table>
</body>

<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>

<script>
    //当时间改变时，表格内容改变
    $("#time").on('change',function(){
        //发送异步请求
        url = "http://localhost:8090/wanda/movies";
        var date = "";
        date = $("#time").val();
        date = date.replace("T"," ");
        date += ":00";
        console.log(date);
        pdata = {"date" : date}
        $.get(url,pdata, function(jsondata){
            //每次查询清空之前查询的内容
            $('#tablebody').empty();
            if(jsondata.code == "200"){
                $.each(jsondata.data, function(index, item){
                    var str = `
                            <tr>
                               <td>${index+1}</td>
                               <td>${item.name}</td>
                               <td>
                                <button name = "${item.id}">选电影院</button>
                                </td>
                            </tr>
                    `;
                    $('#tablebody').append(str);
                })
                console.log(jsondata);
            }else{
                alert("该时间段没有电影上映，请重新选择时间");
            }

            //为每个按钮绑定点击事件，传入每个电影的id和城市名字
            $.each($('button[name]'),function(index,item){
                $(item).on('click',function(event){
                    const button = event.currentTarget;
                    const movieId = $(button).attr('name')
                    console.log(movieId);
                    var cityName = $("#city").val()
                    console.log(cityName)
                    sessionStorage.setItem("date",date)
                    sessionStorage.setItem("cityName",cityName)
                    sessionStorage.setItem("movieId",movieId)
                    window.location.href = "cinema.html";
                })
            })
        },"json")
    })
</script>
</html>